<template>
  <div class="element-positopn-panel">
    <div class="secitonBox">
      <div class="top">
        <div v-for="(item, index) in topBackColorArr.slice(0, 3)" :key="index" class="side">
          <div
            :key="index"
            class="inside"
            @click="updateTopBackColor(item.color)"
            @touchstart="updateTopBackColor(item.color)"
          >
            <img style="flex: 1" :src="item.ele" alt="Father Image" />
          </div>
        </div>
      </div>
      <div class="top">
        <div v-for="(item, index) in topBackColorArr.slice(3, 6)" :key="index" class="side">
          <div
            :key="index"
            class="inside"
            @click="updateTopBackColor(item.color)"
            @touchstart="updateTopBackColor(item.color)"
          >
            <img style="flex: 1" :src="item.ele" alt="Father Image" />
          </div>
        </div>
      </div>
    </div>
    <div class="secitonBox">
      <div class="title">插入节点：</div>
      <div class="topic">
        <div v-for="(item, index) in topicTierArr" :key="index" class="side">
          <div :key="index" class="inside" @click="addTopic(item.tier)" @touchstart="addTopic(item.tier)">
            <img style="flex: 1" :src="item.ele" alt="Father Image" />
          </div>

          <div style="textalign: center; fontsize: 15px">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="secitonBox">
      <div class="title" style="margintop: 5px">添加：</div>
      <div class="topic">
        <div class="side">
          <div :key="1" class="inside" @click="addContact()" @touchstart="addContact()">
            <img style="flex: 1" :src="ConnectLine" alt="Father Image" />
          </div>
          <div style="textalign: center; fontsize: 15px">联系</div>
        </div>
      </div>
    </div>
    <div class="secitonBox">
      <div class="title">节点：</div>
      <div class="top">
        <div v-for="(item, index) in bottomBackColorArr.slice(0, 4)" :key="index" class="side">
          <div
            :key="index"
            class="inside"
            :style="{
              fontSize: '15px',
              backgroundColor: `${item.color}`,
            }"
            @click="updateBottomBackColor(item.color)"
            @touchstart="updateBottomBackColor(item.color)"
          >
            文字
          </div>
        </div>
      </div>
      <div class="top">
        <div v-for="(item, index) in bottomBackColorArr.slice(4, 8)" :key="index" class="side">
          <div
            :key="index"
            class="inside"
            :style="{
              fontSize: '15px',
              backgroundColor: `${item.color}`,
            }"
            @click="updateBottomBackColor(item.color)"
            @touchstart="updateBottomBackColor(item.color)"
          >
            文字
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FatherBackColorBlack from '../../../assets/teaching/fatherBackColorBlack.svg';
import FatherBackColorBlue from '../../../assets/teaching/fatherBackColorBlue.svg';
import FatherBackColorPink from '../../../assets/teaching/fatherBackColorPink.svg';
import FatherBackColorPurple from '../../../assets/teaching/fatherBackColorPurple.svg';
import FatherBackColorWhite from '../../../assets/teaching/fatherBackColorWhite.svg';
import FatherBackColorYellow from '../../../assets/teaching/fatherBackColorYellow.svg';
import SameTopic from '../../../assets/teaching/sameTopic.svg';
import TopTopic from '../../../assets/teaching/topTopic.svg';
import BottomTopic from '../../../assets/teaching/bottomTopic.svg';
import ConnectLine from '../../../assets/teaching/connectLine.svg';

const topBackColorArr = [
  { ele: FatherBackColorBlack, color: 'rgb(213, 214, 222)' },
  { ele: FatherBackColorBlue, color: '#EFF4FF' },
  { ele: FatherBackColorPink, color: 'pink' },
  { ele: FatherBackColorPurple, color: 'rgb(169, 143, 224)' },
  { ele: FatherBackColorYellow, color: 'yellow' },
  { ele: FatherBackColorWhite, color: 'white' },
];
const topicTierArr = [
  { ele: SameTopic, tier: 'sam', name: '同级主题' },
  { ele: TopTopic, tier: 'top', name: '上级主题' },
  { ele: BottomTopic, tier: 'bot', name: '下级主题' },
];
const bottomBackColorArr = [
  { color: 'rgb(213, 214, 222)' },
  { color: '#EFF4FF' },
  { color: 'pink' },
  { color: 'rgb(169, 143, 224)' },
  { color: 'yellow' },
  { color: 'white' },
  { color: 'rgb(242, 242, 242)' },
  { color: 'rgb(235, 245, 222)' },
];
export default {
  props: {
    dir: String,
  },
  data() {
    return {
      FatherBackColorBlack,
      FatherBackColorBlue,
      FatherBackColorPink,
      FatherBackColorPurple,
      FatherBackColorYellow,
      FatherBackColorWhite,
      SameTopic,
      TopTopic,
      BottomTopic,
      ConnectLine,
      bottomBackColorArr,
      topicTierArr,
      topBackColorArr,
    };
  },
  watch: {},
  mounted() {},
  methods: {
    // 顶部背景色选择设置
    updateTopBackColor(value) {
      // const props = { backGroundColor: value };
      this.$emit('updateTopBackColor', value);
    },
    // 底部单个背景色选择设置
    updateBottomBackColor(value) {
      // const props = { backGroundColorOne: value+'-'+Math.random() };
      this.$emit('updateBottomBackColor', value);
    },
    // 增加所选层级节点
    addTopic(value) {
      this.$emit('addTopic', value);
    },
    // 联系线条
    addContact() {
      this.$emit('addContact', 1);
    },
  },
};
</script>

<style lang="less" scoped>
.secitonBox {
  padding: 10px;
}

.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  .side {
    padding: 8px;
    .inside {
      padding: 3px;
      border: 1px solid rgba(0, 0, 0, 0.25);
    }
  }
  .side:hover {
    cursor: pointer;
    padding: 7px;
    border: 1px solid green;
  }
}
.topic {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .side {
    .inside {
      padding: 5px;
      border: 1px solid rgba(0, 0, 0, 0.25);
    }
    .inside:hover {
      cursor: pointer;

      background-color: wheat;
    }
  }
}
.title {
  margin-bottom: 10px;
  font-size: 16px;
}
.label {
  text-align: center;
}
.btn-icon {
  margin-right: 3px;
}
.icon-btn {
  cursor: pointer;

  &.active {
    color: #d14424;
  }
}
.text-btn {
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;

  &:hover {
    background-color: #efefef;
    border-radius: 2px;
  }
}
</style>
